<template>
    <div class="add-first-box">
        <el-button type="success" size="small" title="新增一级目录" @click="editDir('addOne')">
            <el-icon size="18"><DocumentAdd /></el-icon>
        </el-button>
        <el-button type="primary" size="small" @click="reSearch" >查询</el-button>
    </div>
    <div class="second-box">
        <div class="dirbox">
            <el-tree style="max-width: 600px" :data="dirsInfo" 
            node-key="ID" default-expand-all
                :expand-on-click-node="false">
                <template #default="{ node, data }">
                    <span class="custom-tree-node">
                        <div class="title-span-box">
                            <el-icon size="18">
                                <component :is="data.CUST_TYPE ? 'Folder' : 'Document'"/>
                            </el-icon>
                            <span>{{ data.TITLE }}</span>    
                        </div>
                        <div class="icon-box">
                            <el-button type="primary" size="small" title="编辑" @click="editDir('update',data)">
                                <el-icon size="18"><Edit /></el-icon>
                            </el-button>
                            <el-button type="success" size="small" title="新增子级" :disabled="data.CUST_TYPE === 0" @click="editDir('addSub',data)">
                                <el-icon size="18"><CirclePlusFilled /></el-icon>
                            </el-button>
                            <el-button type="danger" size="small" title="删除" @click="editSubmit('delete',data)">
                                <el-icon size="18"><RemoveFilled /></el-icon>
                            </el-button>
                        </div>  
                    </span>
                </template>
            </el-tree>
        </div>
    </div>
    <Drawer ref="drawerRef" :title="title" :size="size" 
        @submit="editSubmit(submitType, dirObj)"
        @cancel-submit="resetForm"
    >
        <el-form :model="dirObj" ref="updateFormRef" :rules="rules">
            <el-form-item label="ID" :label-width="formLabelWidth">
                <el-input v-model="dirObj.ID" autocomplete="off" disabled />
            </el-form-item>
            <el-form-item label="父级ID" :label-width="formLabelWidth" prop="PARENT">
                <el-input v-model="dirObj.PARENT" autocomplete="off" :disabled="submitType === 'addOne'"/>
            </el-form-item>
            <el-form-item label="目录路径" :label-width="formLabelWidth" prop="PATH">
                <el-input v-model="dirObj.PATH" autocomplete="off" />
            </el-form-item>
            <el-form-item label="组件路径" :label-width="formLabelWidth" prop="COMPONENTPATH">
                <el-input v-model="dirObj.COMPONENTPATH" autocomplete="off" :disabled="submitType === 'addOne'"/>
            </el-form-item>
            <el-form-item label="组件名" :label-width="formLabelWidth" prop="CONPONENTNAME">
                <el-input v-model="dirObj.COMPONENTNAME" autocomplete="off" :disabled="submitType === 'addOne'"/>
            </el-form-item>
            <el-form-item label="目录层次" :label-width="formLabelWidth" prop="DIRLEVEL">
                <el-input v-model="dirObj.DIRLEVEL" autocomplete="off" />
            </el-form-item>
            <el-form-item label="标题" :label-width="formLabelWidth" prop="TITLE">
                <el-input v-model="dirObj.TITLE" autocomplete="off" />
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth" >
                <el-input v-model="dirObj.REMARK" autocomplete="off" />
            </el-form-item>
            <el-form-item label="类型" :label-width="formLabelWidth" prop="CUST_TYPE">
                <!-- <el-input v-model="dirObj.CUST_TYPE" autocomplete="off" /> -->
                <el-select v-model="dirObj.CUST_TYPE" placeholder="请选择类型" style="width: 240px">
                    <el-option
                        v-for="item in custTypeSelectOption"
                        :key="item.cust_type"
                        :label="item.description"
                        :value="item.cust_type"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="图标" :label-width="formLabelWidth">
                <IconSelect v-model="dirObj.ICON"/>
            </el-form-item>
        </el-form>
    </Drawer>
</template>

<script setup>
import { ref, reactive,onBeforeMount} from 'vue'
import { getDirsInfo, editDirInfo } from '@/utils/adminApi/dirs'
import { recursion } from '@/utils/recursion'
import Drawer from '@/components/Drawer.vue'
import IconSelect from '@/components/IconSelect.vue'
import {msgOpen} from '@/utils/msg'
import { confirm } from '@/utils/confirm'
import {mainStore} from '@/stores/store'

let useStore = mainStore()


let dirsInfo = ref([])
let dirObj = reactive({
    ID: null,
    PARENT: null,
    PATH:"",
    COMPONENTPATH: "",
    COMPONENTNAME: "",
    DIRLEVEL: "",
    TITLE: "",
    REMARK: "",
    CUST_TYPE:1,
    ICON:null
})
let drawerRef = ref(null) //组件ref
let title = ref("")
let size = ref("35%")
let formLabelWidth = ref("80")
let submitType = ref('')
let custTypeSelectOption = [
    { cust_type:1,description:"目录"},
    { cust_type:0,description:"链接"}
]

//表单验证ref
let updateFormRef = ref(null)
//输入框验证规则
let rules = reactive({
    PATH: [
        { required: true, message: '请输入目录路径', trigger: 'blur' },
    ],
    DIRLEVEL: [
        { required: true, message: '请输入目录层次', trigger: 'blur' },
    ],
    TITLE: [
        { required: true, message: '请输入标题', trigger: 'blur' },
    ],
    CUST_TYPE: [
        { required: true, message: '请输入类型（目录为1，链接为0）', trigger: 'blur' },
    ]
})


/**
 * 编辑目录
 * @param {String} type 处理类型
 * @param {Object} row 行对象
 */
const editDir = (type,row) => {
    submitType.value = type
    drawerRef.value.open()
    if(type === "addOne"){
        title.value = "新增一级目录"
        resetForm()
    }else if(type === "addSub"){
        title.value = "新增子级"
        let subDirObj = JSON.parse(JSON.stringify(row)) //对象深复制
        dirObj.ID = null
        dirObj.PARENT = subDirObj.ID
        dirObj.PATH = subDirObj.PATH
        dirObj.COMPONENTPATH = subDirObj.COMPONENTPATH
        dirObj.COMPONENTNAME = null
        dirObj.DIRLEVEL = subDirObj.DIRLEVEL
        dirObj.TITLE = null
        dirObj.REMARK = null
        dirObj.CUST_TYPE = null
        dirObj.ICON = null
    }
    else if(type === "update"){
        title.value = "编辑"
        dirObj = row
    }    
}

//重置表单
const resetForm = ()=>{
    dirObj = reactive({
                ID: null,
                PARENT: null,
                PATH: "/xfjc/index/",
                COMPONENTPATH: "",
                COMPONENTNAME: "",
                DIRLEVEL: "",
                TITLE: "",
                REMARK: "",
                CUST_TYPE:null,
                ICON:null
            })
}

//重新查询
const reSearch = async ()=>{
    let dirsInfoRes = await getDirsInfo()
    dirsInfo.value = recursion(dirsInfoRes.datas.dirs)  
    useStore.setDirs(dirsInfo.value) 
}

/**
 * 提交
 * @param {String} type 处理类型 
 * @param {Object} form 表单对象
 */
const editSubmit = async (type, form) => {
    // console.log(type);
    // console.log(form);
    if (type === "update" || type === "addOne" || type === "addSub") {
        updateFormRef.value.validate(async (valid) => {
            if (!valid) {
                return false
            } else {
                drawerRef.value.showLoading()
                let newDirs = await editDirInfo(type, form)
                // console.log(newDirs)
                drawerRef.value.hideLoading()
                drawerRef.value.close()
                msgOpen(newDirs.msg,'success')
                reSearch()
            }
        })
    }else if(type === "delete"){
        type === "update"
        let res = await confirm(form.ID)
        if(res){
            let newDirs = await editDirInfo(type, form)
            msgOpen(newDirs.msg,'success')
            reSearch()
        }
    }
}

//渲染DOM前获取数据
// onBeforeMount(() => {
//     // if(useStore.dirs){
//         // dirsInfo.value = useStore.dirs
//     // }else{
//         reSearch()
//     // }    
// })
</script>

<style lang="less" scoped>
.add-first-box {
    height: 5%;
    width: 100%;
    border-bottom: #467df5 .0625rem solid;
    padding-left: 1.25rem;
    display: flex;
    justify-content: start;
    align-items: center;
}

.second-box {
    height: 95%;
    width: 100%;
    display: flex;
    overflow: auto;
    .dirbox {
        height: 90%;
        width: 100%;
        .custom-tree-node {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            padding-right: 8px;
            .title-span-box{
                flex: 1;
                display: flex;
                align-items: center;
                span{
                    margin-left: .625rem;
                }
            }
        }
    }
}
</style>